// 小、初、高 表格
import React, {useEffect, useState} from 'react';
import CardTable from '~/page/FineBi/common/CardTable';
import {queryCentralTable} from '~/service/refundReport';
import {COMMON_KEY} from '../config';


function TableItem(props) {
    const {children, dimensionAndValues, dId, searchType, label} = props;
    const [loading, setLoading] = useState(false);
    const [title, setTitle] = useState();
    const [list, setList] = useState([]);

    useEffect(() => {
        const dashBoard = [
            {
                dashBoardName: dId,
                dashBoardId: dId
            }
        ];
        const pDimensionAndValues = dimensionAndValues.map(item => ({
            ...item,
            dimensionId: `${dId}_${COMMON_KEY}`,
            dimensionName: COMMON_KEY,
        }));
        const param = {
            dimensionAndValues: pDimensionAndValues,
            dashBoardList: dashBoard,
            agilityViewValueRequestType: searchType,
            fieldMessageDTO: {
                name: 'department',
                filterValue: label
            }
        };
        setLoading(true);
        queryCentralTable(param)
            .then(res => {
                const cardDetail = res?.data?.[dId] || {};
                const dataRes = cardDetail[`${dId}_excel`] || {};
                const {unitName, unitId} = dataRes;

                setTitle(unitName);
                setList(dataRes || []);
            })
            .finally(() => {
                setLoading(false);
            });
    }, [dimensionAndValues]);

    return (
        <CardTable
            unitId={dId}
            unitName={title}
            data={list}
            loading={loading}
            span={12}
            height={300}
            tableProps={{
                pagination: false,
                rowClassName: record => record.isGood === 'true' && 'color-red'
            }}
        />
    );
}

export default TableItem;

